<template>
  <div class="mani-content">
    <titleLabe title="1 简介"/>
    <div style="text-indent:2em;line-height: 25px">
      本方案依据中国药典2015年版通则9001“原料药物与制剂稳定性试验指导原则”制订，考察{{data.scheme_name}}临床样品稳定性，
      为其上市后的储存条件提供数据支持。
    </div>
    <titleLabe title="2 样品信息"/>

    <div class="table_div">
      <table border="1" style="width: 100%" cellspacing="0" cellpadding="10">
        <thead>
        <tr>
          <th>名称</th>
          <th v-for="(cel,ind) in headList" :key="ind">{{cel}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in sample" :key="index">
          <td align="center">{{item.name}}</td>
          <template v-for="(col,indx) in headList">
            <td align="center" :key="indx">
              <span v-if="typeof(item[col]) === 'object' ">
                {{handlObj(item[col])}}
              </span>
              <span v-else> {{item[col]}}</span>
            </td>
          </template>
        </tr>
        </tbody>
      </table>

    </div>


    <titleLabe title="3 稳定性考察项目"/>
    <check :check-data="checkData" :stability='data.stability_scheme_type'
           :check-list="tableDate"/>
  </div>
</template>

<script>
  import titleLabe from './title'
  import check from './check'

  export default {
    name: 'tabble',
    components: {
      titleLabe,
      check
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      tableDate: {
        type: Array,
        default() {
          return []
        }
      },
      checkData: {
        type: Object,
        default() {
          return {}
        }
      }

    },
    data() {
      return {
        sample: [
          { name: '批号' }, { name: '规格' }, { name: '生产厂家' }
        ],
        headList: [],
        checkList: []
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {
      handlCom() {
        return function(val) {
          let a = ''
          for (let key in val) {
            let index = this.headList.findIndex(a => a === key)
            a = val[this.headList[index]]
          }
          return a
        }
      },
      handlObj() {
        return function(val) {
          let str = ''
          for (let i = 0; i < val.length; i++) {
            str += val[i].sample_batch
            if (i !== val.length - 1) {
              str = str + '、'
            }
          }
          return str
        }
      }
    },

    //属性是手动定义的所需监听的值
    watch: {
      tableDate: {
        handler(newValue, oldValue) {
          this.handlSample()
        },
        deep: true,
        immediate: true
      }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {

    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      handlSample() {
        this.headList = []
        this.sample = [
          { name: '批号' }, { name: '规格' }, { name: '生产厂家' }
        ]
        if (this.tableDate.length > 0) {
          for (let i = 0; i < this.tableDate.length; i++) {
            let a = this.tableDate[i].stability_sample_info
            let aa, bb, cc
            aa = a.sample_name + 'batch_info'
            bb = a.sample_name + 'packaging_nu'
            cc = a.sample_name + 'producer'
            this.headList.push(a.sample_name)
            this.sample.forEach(item => {
              if (item.name === '批号') {
                item[a.sample_name] = a.batch_info
              }
              if (item.name === '规格') {
                let sss = a.packaging_nu === 0 ? '' : a.packaging_nu
                let ddd = a.packaging_nu === 0 ? '' : '/'
                item[a.sample_name] = `${sss}${a.packaging_nu_unit}${ddd}${a.packaging_unit}`
              }
              if (item.name === '生产厂家') {
                item[a.sample_name] = a.producer
              }
            })
          }
        }
      }

    }

  }

</script>

<style scoped lang="scss">
  th {
    background: #f5f5f5;
  }
</style>
